<template>
  <div>
    <!--面包屑导航区-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>商户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区域-->
    <el-card>
      <!--搜索与添加区域-->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input clearable @clear="getMerchantList()" placeholder="请输入商户名" v-model="queryInfo.merchant_name" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="getMerchantList()"></el-button>
          </el-input>
        </el-col>
        
        <el-col :span="4">
          <el-button type="primary">添加商户</el-button>
        </el-col>
      </el-row>
      <!--用户列表区域-->
      <el-table :data="merchantList" border striep>
        <!--<el-table-column type="index"></el-table-column>-->
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="商户名" prop="merchant_name"></el-table-column>
        <el-table-column
          label="商户key"
          prop="merchant_key"
          width="230px"
        ></el-table-column>
        <el-table-column
          label="余额"
          prop="available_balance"
        ></el-table-column>
        <el-table-column
          label="联系人"
          prop="merchant_contract_name"
        ></el-table-column>
        <el-table-column
          label="手机"
          prop="merchant_contract_phone"
        ></el-table-column>
        <el-table-column label="借款类型" prop="loan_type"></el-table-column>
        <el-table-column
          label="支付通道"
          prop="pay_channel_name"
        ></el-table-column>
        <el-table-column
          label="操作人"
          prop="first_operator_user_name"
        ></el-table-column>
        <el-table-column
          label="总充值"
          prop="total_recharge_amount"
        ></el-table-column>
        <el-table-column label="短信费" prop="message_fee"></el-table-column>
        <el-table-column label="风控费" prop="risk_fee"></el-table-column>
        <el-table-column label="操作费" prop="operator_fee"></el-table-column>
        <el-table-column label="商务费" prop="e_commerce_fee"></el-table-column>
        <el-table-column label="活体费" prop="ocr_fee"></el-table-column>
        <el-table-column label="银行卡费" prop="card_fee"></el-table-column>
        <el-table-column label="贷款费" prop="loan_fee"></el-table-column>
        <el-table-column label="提现费" prop="withdraw_fee"></el-table-column>
        <el-table-column label="收款费" prop="receive_fee"></el-table-column>
        <el-table-column label="时间" prop="created_at" width="180px" ></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              @change="statusChange(scope.row)"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
            <!-- {{Boolean(scope.row.status)}} -->
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130px">
          <template>
            <el-button type="primary" icon="el-icon-edit" size="mini" circle ></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" circle ></el-button>
            <el-tooltip class="item" effect="dark" content="设置" placement="top" :enterable="false" >
              <el-button type="warning" icon="el-icon-setting" size="mini" circle ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!--分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.current_page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryInfo.page_row_num"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryInfo.total_row_num"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //获取商户列表
      queryInfo: {
        merchant_name: '',
        total_page: 1,
        current_page: 1,
        total_row_num: 20,
        page_row_num: 20
      },
      merchantList: [],
      submitUrl: ''
    }
  },
  created() {
    // this.getMerchantList()
  },
  methods: {
    async getMerchantList() {
      const { data: res } = await this.$http.get('/merchant/index', {
        params: this.queryInfo
      })
      if (res.code !== 200) {
        return this.$message.error('获取数据失败')
      }
      this.merchantList = res.data.merchant_Info.list
      this.queryInfo.total_page = Number(res.data.merchant_Info.total_page)
      this.queryInfo.current_page = Number(res.data.merchant_Info.current_page)
      this.queryInfo.total_row_num = Number(
        res.data.merchant_Info.total_row_num
      )
      this.queryInfo.page_row_num = Number(res.data.merchant_Info.page_row_num)
      //console.log(res)
    },
    //分页切换pageSize事件
    //页量
    handleSizeChange(newSize) {
      this.queryInfo.page_row_num = newSize
      this.getMerchantList()
      //console.log(newSize)
    },
    //页数
    handleCurrentChange(newSize) {
      this.queryInfo.current_page = newSize
      this.getMerchantList()
      //console.log(newSize)
    },
    //switch状态切换
    async statusChange(merchangeInfo) {
      console.log(merchangeInfo)

      switch (merchangeInfo.status) {
        case 1:
          this.submitUrl = this.consts.ENABLE_MERCHANT_URL
          break
        case 0:
          this.submitUrl = this.consts.DISABLE_MERCHANT_URL
          break
      }
      const { data: res } = await this.$http.post(this.submitUrl, {
        merchant_key: merchangeInfo.merchant_key
      })
      if (res.code == this.consts.CODE_FAILURE)
        return this.$message.error(
          '商户' + merchangeInfo.merchant_name + '提交失败失败'
        )
    }
  }
}
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 15px;
}

.el-pagination {
  margin-top: 15px;
}
</style>
